<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>scripty2 API documentation | Home</title>
    <link type="text/css" charset="utf-8" rel="stylesheet" media="screen, projection" href="stylesheets/apidocs.css" />
  </head>
  <body>
    <div id="page">

      <div id="masthead">
        <div id="masthead_content">
          <a href="">
            <h1 id="logo"><span class="replaced">scripty2</span></h1>
          </a>
          <div id="menu" class="clearfix">
            <div class="search-box">
              <form action="" method="get">
                <label><span class="hidden">Search </span><input type="text" id="search" size="20" /></label>
              </form>
              <ul id="search_results" class="search-results menu-items" style="display:none"><li></li></ul>
            </div>
            <div class="api-box">
              <h2><a href="#" id="api_menu_button">Quick Links &darr;</a></h2>
              <ul id="api_menu" class="menu-items" style="display: none">
                
                  <li>              <div class='menu-item'>
                <a class="section" href="scripty2_core_section.html" title="scripty2 core section (section)">scripty2 core section</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 core/function.html" title="Function (class)">Function</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 core/number.html" title="Number (class)">Number</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 core/object.html" title="Object (class)">Object</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 core/s2.html" title="S2 (namespace)">S2</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 ui/s2/css.html" title="S2.CSS (namespace)">S2.CSS</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 core/s2/extensions.html" title="S2.Extensions (namespace)">S2.Extensions</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 fx/s2/fx.html" title="S2.FX (namespace)">S2.FX</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/attribute.html" title="S2.FX.Attribute (class)">S2.FX.Attribute</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/base.html" title="S2.FX.Base (class)">S2.FX.Base</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/element.html" title="S2.FX.Element (class)">S2.FX.Element</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/heartbeat.html" title="S2.FX.Heartbeat (class)">S2.FX.Heartbeat</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/morph.html" title="S2.FX.Morph (class)">S2.FX.Morph</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 fx/s2/fx/operators.html" title="S2.FX.Operators (namespace)">S2.FX.Operators</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/operators/base.html" title="S2.FX.Operators.Base (class)">S2.FX.Operators.Base</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/operators/scroll.html" title="S2.FX.Operators.Scroll (class)">S2.FX.Operators.Scroll</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/operators/style.html" title="S2.FX.Operators.Style (class)">S2.FX.Operators.Style</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/operators/webkitcsstransition.html" title="S2.FX.Operators.WebkitCssTransition (class)">S2.FX.Operators.WebkitCssTransition</a>
              </div>
</li></ul></li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/parallel.html" title="S2.FX.Parallel (class)">S2.FX.Parallel</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/queue.html" title="S2.FX.Queue (class)">S2.FX.Queue</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/scroll.html" title="S2.FX.Scroll (class)">S2.FX.Scroll</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/s2/fx/style.html" title="S2.FX.Style (class)">S2.FX.Style</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 fx/s2/fx/transitions.html" title="S2.FX.Transitions (namespace)">S2.FX.Transitions</a>
              </div>
</li></ul></li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 ui/s2/ui.html" title="S2.UI (namespace)">S2.UI</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/accordion.html" title="S2.UI.Accordion (class)">S2.UI.Accordion</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/autocompleter.html" title="S2.UI.Autocompleter (class)">S2.UI.Autocompleter</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/base.html" title="S2.UI.Base (class)">S2.UI.Base</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior.html" title="S2.UI.Behavior (class)">S2.UI.Behavior</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior/down.html" title="S2.UI.Behavior.Down (class)">S2.UI.Behavior.Down</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior/drag.html" title="S2.UI.Behavior.Drag (class)">S2.UI.Behavior.Drag</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior/focus.html" title="S2.UI.Behavior.Focus (class)">S2.UI.Behavior.Focus</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior/hover.html" title="S2.UI.Behavior.Hover (class)">S2.UI.Behavior.Hover</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/behavior/resize.html" title="S2.UI.Behavior.Resize (class)">S2.UI.Behavior.Resize</a>
              </div>
</li></ul></li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/button.html" title="S2.UI.Button (class)">S2.UI.Button</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/dialog.html" title="S2.UI.Dialog (class)">S2.UI.Dialog</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/menu.html" title="S2.UI.Menu (class)">S2.UI.Menu</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 ui/s2/ui/mixin.html" title="S2.UI.Mixin (namespace)">S2.UI.Mixin</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="mixin" href="scripty2 ui/s2/ui/mixin/configurable.html" title="S2.UI.Mixin.Configurable (mixin)">S2.UI.Mixin.Configurable</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="mixin" href="scripty2 ui/s2/ui/mixin/shim.html" title="S2.UI.Mixin.Shim (mixin)">S2.UI.Mixin.Shim</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="mixin" href="scripty2 ui/s2/ui/mixin/trackable.html" title="S2.UI.Mixin.Trackable (mixin)">S2.UI.Mixin.Trackable</a>
              </div>
</li></ul></li>
<li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 ui/s2/ui/multitouch.html" title="S2.UI.Multitouch (namespace)">S2.UI.Multitouch</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/overlay.html" title="S2.UI.Overlay (class)">S2.UI.Overlay</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/progressbar.html" title="S2.UI.ProgressBar (class)">S2.UI.ProgressBar</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/slider.html" title="S2.UI.Slider (class)">S2.UI.Slider</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 ui/s2/ui/tabs.html" title="S2.UI.Tabs (class)">S2.UI.Tabs</a>
              </div>
</li></ul></li></ul></li></ul></li>
                
                  <li>              <div class='menu-item'>
                <a class="section" href="scripty2_fx_section.html" title="scripty2 fx section (section)">scripty2 fx section</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="namespace" href="scripty2 fx/element.html" title="Element (namespace)">Element</a>
              </div>
<ul><li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/element/layout.html" title="Element.Layout (class)">Element.Layout</a>
              </div>
</li>
<li>              <div class='menu-item'>
                <a class="class" href="scripty2 fx/element/offset.html" title="Element.Offset (class)">Element.Offset</a>
              </div>
</li></ul></li></ul></li>
                
                  <li>              <div class='menu-item'>
                <a class="section" href="scripty2_ui_section.html" title="scripty2 ui section (section)">scripty2 ui section</a>
              </div>
</li>
                
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div id="main" class="page-content">
        

<h2 class="page-title">scripty2 API</h2>

<div class="page-introduction">
  <p>Welcome to the scripty2 API Documentation.</p>
  
  <p>
    This rewrite of the script.aculo.us
    library is a prerelease alpha version and not meant for production use,
    although it is used in live projects like <a href="http://twistori.com">twistori</a>
    and <a href="http://letsfreckle.com">freckle</a> and it works great!.
  </p>
    
  <p>
    scripty2 is divided into three parts, <em>core</em>, <em>fx</em>, and <em>ui</em>,
    and supports IE6+, Safari 3+, Firefox 3+, Chrome, Opera 10 and most WebKit-based browsers.
  </p>
  
  <p style="color:red">
    <b>Alpha notice:</b> scripty2 is currently in alpha, and not feature-complete.
    The API is not final and subject to change.
  </p>
</div>


<div class="section section-sections">
  <div class="section-title">
    <h3>Sections</h3>
  </div>
  
  <div class="section-content">
    <ul class="section-list">
      
      <li>
        <h4>
          <a href="scripty2_core_section.html">scripty2 core</a>
        </h4>
        <p><p>Core contains various JavaScript and DOM extensions used by scripty2 fx and scripty2 ui,
plus developer utility classes.</p></p>
      </li>      
      
      <li>
        <h4>
          <a href="scripty2_fx_section.html">scripty2 fx</a>
        </h4>
        <p><p>The scripty2 effects framework provides for time-based transformations of DOM elements
and arbitrary JavaScript objects. This is at the core of scripty2 and presents a refinement
of the visual effects framework of script.aculo.us 1.</p></p>
      </li>      
      
      <li>
        <h4>
          <a href="scripty2_ui_section.html">scripty2 ui</a>
        </h4>
        <p><ul>
<li><code><a href="scripty2 ui/s2/css.html" title="S2.CSS (namespace)">S2.CSS</a></code>: functions for CSS parsing, color normalization and CSS value interpolation.</li>
<li><code><a href="scripty2 ui/s2/ui.html" title="S2.UI (namespace)">S2.UI</a></code>: User interface patterns that can be used to build components and page behaviours on top of it.</li>
</ul></p>
      </li>      
      
    </ul>
  </div>
</div>

<div class="section">
  <div class="section-title">
    <h3>Getting started</h3>
  </div>
  
  <div class="section-content">
    <ul class="section-list">
      <li>
        <p>
          scripty2 depends on Prototype 1.6.1 or later. For your convenience, a development copy
          and a minified version of Prototype is included in the distribution.
        </p>
        <p>
          To use scripty2, include this line in your HTML:
          <pre><code>&lt;script src=&quot;prototype.scripty2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></pre>
        </p>
        <p>
          For debugging, you can also include the libraries seperately:
          <pre><code>&lt;script src=&quot;prototype.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;s2.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
          </code></pre>
        </p>
      </li>
    </ul>
  </div>
</div>

<div class="section">
  <div class="section-title">
    <h3>Help &amp; Community</h3>
  </div>
  
  <div class="section-content">
    <ul class="section-list">
      <li>
        <p>
          Want to discuss? Share feature ideas, problems, suggestions, praise?
          You're welcome to do so on the <a href="http://groups.google.com/group/scripty2">scripty2 Google Group</a>.
        </p>
        <p>
          Found a genuine bug? 
          Please report in detail on our <a href="https://prototype.lighthouseapp.com/projects/10606-scripty2">Lighthouse bug tracker.</a>.
        </p>
        <p>
          Interested in development? Check out the <a href="http://github.com/madrobby/scripty2">scripty2 repository on Github</a>.
        </p>
      </li>
    </ul>
  </div>
</div>

      </div>

      <div id="footer">
        <div class="about clearfix">
          <div class="copyright clearfix">
            <div class="copyright-about">
              This work is licensed under a<br/>
              <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>.<br/>
            </div>
          </div>
          <div class="credits">
            <p>
              Generated by <a href="http://pdoc.org">PDoc</a>.
              Icons by <a href="http://froodee.at/">Samo</a>.
            </p>
            <p>
              Copyright © 2005-2010 <a href="http://mir.aculo.us/">Thomas Fuchs</a>.
            </p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="javascripts/prototype.js" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/s2.js" charset="utf-8"></script>
    <script type="text/javascript" src="javascripts/application.js" charset="utf-8"></script>
    <script type="text/javascript" src="javascripts/item_index.js" charset="utf-8"></script>
    <script type="text/javascript">PDoc.pathPrefix = '';</script>
  </body>
</html>
